import type { ArtColumn } from 'ali-react-table';
import { Button, InputNumber } from 'antd';
import MonthSelect from '../MonthSelect';
import { Form } from 'antd';
import React from 'react';

export const monthOptions = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

const tabList = [
  {
    tab: '中长期限价',
    key: '1',
  },
  {
    tab: '基数',
    key: '2',
  },
];

const mediumAndLongColumns = (
  save: (id: number, index: number) => void,
  cancel: (id: number, index: number) => void,
  edit: (id: number, index: number) => void,
): ArtColumn[] => {
  return [
    {
      name: '小时序号',
      code: 'timeOrder',
      align: 'center',
    },
    {
      name: '时段',
      code: 'timeOrderStr',
      align: 'center',
    },
    {
      name: '参考价(元/MWh)',
      code: 'referencePrice',
      align: 'center',
      render: (value: any, row: any) => {
        return row.isEdit ? (
          <Form.Item name={`referencePrice@${row.id}`}>
            <InputNumber min={0} />
          </Form.Item>
        ) : (
          value
        );
      },
    },
    {
      name: '下限价(元/MWh)',
      code: 'lowerLimitPrice',
      align: 'center',
      render: (value: any, row: any) => {
        return row.isEdit ? (
          <Form.Item name={`lowerLimitPrice@${row.id}`}>
            <InputNumber min={0} />
          </Form.Item>
        ) : (
          value
        );
      },
    },
    {
      name: '上限价(元/MWh)',
      code: 'upperLimitPrice',
      align: 'center',
      render: (value: any, row: any) => {
        return row.isEdit ? (
          <Form.Item name={`upperLimitPrice@${row.id}`}>
            <InputNumber min={0} />
          </Form.Item>
        ) : (
          value
        );
      },
    },
    {
      name: '操作',
      code: 'options',
      align: 'center',
      width: 140,
      render: (v, record, index) => {
        if (record.isLast) {
          return '-';
        }
        return record.isEdit ? (
          <>
            <Button type="link" onClick={() => save(record.id, index)}>
              保存
            </Button>
            <Button type="link" onClick={() => cancel(record.id, index)}>
              取消
            </Button>
          </>
        ) : (
          <>
            <Button type="link" onClick={() => edit(record.id, index)}>
              编辑
            </Button>
          </>
        );
      },
    },
  ];
};

const baseNumberColumns = (
  save: (id: number, index: number) => void,
  cancel: (id: number, index: number) => void,
  edit: (id: number, index: number) => void,
  del: (id: number, index: number) => void,
): ArtColumn[] => {
  return [
    {
      name: '交易单元',
      code: 'stationName',
      align: 'center',
    },
    {
      name: '年份',
      code: 'year',
      align: 'center',
    },
    {
      name: '有无基数',
      code: 'list',
      align: 'center',
      render: (v, record) => {
        return (
          <Form.Item name={`list@${record.id}`}>
            <MonthSelect disabled={!record.isEdit} />
          </Form.Item>
        );
      },
    },
    {
      name: '操作',
      code: 'options',
      align: 'center',
      width: 140,
      render: (v, record, index) =>
        record.isEdit ? (
          <>
            <Button type="link" onClick={() => save(record.id, index)}>
              保存
            </Button>
            <Button type="link" onClick={() => cancel(record.id, index)}>
              取消
            </Button>
          </>
        ) : (
          <>
            <Button type="link" onClick={() => edit(record.id, index)}>
              编辑
            </Button>
            <Button type="link" onClick={() => del(record.id, index)}>
              删除
            </Button>
          </>
        ),
    },
  ];
};

export { tabList, mediumAndLongColumns, baseNumberColumns };
